import React, { Component } from 'react'
import "./GoodList.css"
import SearchInput from "../SearchInput/SearchInput"
import { Tabs, Toast } from 'antd-mobile';
import myaxios from "../../utils/myaxios"
import timg from "../../assets/images/timg.gif"


export default class GoodList extends Component {
  constructor(props) {
    super(props);
    console.log(props)
    // 列表的引用
    this.goodListRef = React.createRef()   // 获取react中的节点 去下面节点中绑定
    this.pagesize = 10;  //  默认返回的每条数据的数量
    this.pagenum = 1    //页码 默认为为第一页 后面请求的话会++
  }
  state = {
    tabs:[{ title: "综合" },{ title: "销量" },{ title: "价格" }],
    goods:[]
  }

  componentDidMount(){
    console.log(this.props.location.search);
    let { search } = this.props.location;
    let params = search.split("?")[1] || "";
    // ?cid=6
    // cid=6
    // ["cid","6"]
    let params_arr = params.split("=");
    if (params_arr[0] === "cid") {
      this.cid = params_arr[1];
    } else if (params_arr[0] === "query") {
      this.query = params_arr[1];
    }
    // 执行请求数据
    this.getProductList()

    // 注册滚动监听的时间
    // console.log(this.goodListRef)
    this.goodListRef.current.parentElement.addEventListener("scroll",this.handleScroll)
  }

  // 检测是否到底了
  handleScroll = () => {
    // 找到列表这个大盒子的节点
    let parentElement = this.goodListRef.current.parentElement;
    // 客户端的高度 clientHeight
    let clientHeight = parentElement.clientHeight
    // 列表的高度
    let scrollHeight = parentElement.scrollHeight;
    // 列表已经滚动的距离
    let scrollTop = parentElement.scrollTop
    // console.log(scrollHeight-clientHeight-scrollTop)
    if(scrollHeight-clientHeight-scrollTop <= 0){
      console.log("到底了")
      this.getProductList()
    }
  }
  
  // 卸载监听事件
  componentWillUnmount(){
    this.goodListRef.current.parentElement.removeEventListener("scroll",this.handleScroll)
  }


  // 点击返回上一页
  handleBackClick = (params) => {
    window.history.go(-1)
  }


  // 请求数据 获取产品列表
  getProductList = () => {
    // 拼接的参数
    let params = {};
    if (this.cid) {
      params["cid"] = this.cid;
    }
    if(this.query){
      //                可对 encodeURIComponent() 函数编码的 URI 进行解码 百分比解码
      params["query"] = decodeURIComponent(this.query)
    }
    // 如果页码存在
    if(this.total) params["pagenum"] = ++this.pagenum;

    else params["pagenum"] = this.pagenum;
    // 默认页码
    params["pagesize"] = this.pagesize;
    // 如果当前页码大于总的页码
    if(this.pagenum > Math.ceil(this.total / this.pagesize)){
      Toast.info("已经是最后一条数据啦!",1)
    }else{
      myaxios
        .get("goods/search",{
          params:params,
        })
        .then((res)=>{
          // console.log(res)
          this.total = res.total
          this.pagenum = res.pagenum
          this.setState({
            goods:[...this.state.goods,...res.goods],   //追加数据
          });
        })
        .catch((err)=>{console.log(err)});
    }

  }
  

  // 点击跳转当前商品详情页
  handleItemClick = (goods_id) => {
    this.props.history.push("/goodDetail/" + goods_id)
  }
  

  render() {
    return (
      <div className="yg-gl">
        {/* 头部开始 */}
        <div className="yg-gl-head">
          <i
            className="iconfont icon-fanhui-xianxing"
            onClick={this.handleBackClick}
          ></i>
          <span>列表</span>
        </div>
        {/* 头部结束 */}


        {/* 搜索部分开始 */}
        <div className="yg-index-search">
          <SearchInput></SearchInput>
        </div>
        {/* 搜索部分结束 */}

        {/* tab 标签页开始 */}
        <div className="yg-gl-tabs">
          <Tabs tabs={this.state.tabs}
            initialPage={0}
            onChange={(tab, index) => { console.log('onChange', index, tab); }}
            onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            tabBarUnderlineStyle={{ borderColor: "red" }}
            tabBarTextStyle={{ fontWeight: "200", color: "black" }}
          >
            <div className="yg-gl-tab-zh" ref={this.goodListRef}>
              {
                this.state.goods.map((v,index)=>{
                  return (
                    <div
                      className="tab-zh-item"
                      key={v.goods_id}
                      onClick={this.handleItemClick.bind(this,v.goods_id)}
                    >
                      <div className="zh-item-left">
                        <img 
                          src={v.goods_small_logo ? v.goods_small_logo : timg}
                          alt=""/>
                      </div>
                      <div className="zh-item-right">
                        <div className="item-right-top">{v.goods_name}</div>
                        <div className="item-right-bottom">￥{v.goods_price}</div>
                      </div>
                    </div>
                  )
                })
              }
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              销量
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              价格
            </div>
          </Tabs>
        </div>
        {/* tab 标签页结束 */}
      </div>
    )
  }
}
